<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>校区</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/elementUI.js"></script>
    <link rel="stylesheet" href="../css/elementUI.css">

</head>
<body>
<div id="app">
    <el-input v-model="query.name" placeholder="根据校区名称模糊查询" style="width: 200px"></el-input>
    <el-select v-model="query.cid" placeholder="请选择">
        <el-option
                v-for="item in campusList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
        </el-option>
    </el-select>
    <el-button @click="initData1()" type="primary" size="small">查询</el-button>
    <el-button @click="goAdd()" type="primary" size="small">添加</el-button>
    <el-button @click="delMany()" type="primary" size="small">删除</el-button>

    <el-dialog :title="mode.title" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="专业名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="校区名称" :label-width="formLabelWidth">
            <el-select v-model="form.cid" placeholder="请选择">
                <el-option
                        v-for="item in campusList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
        </div>
    </el-dialog>
    <el-table
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="id"
                label="编号">
        </el-table-column>
        <el-table-column
                prop="name"
                label="专业名称">
        </el-table-column>
        <el-table-column
                prop="campus.name"
                label="所属校区">
        </el-table-column>
        <el-table-column
                prop="job.num"
                label="就业人数">
        </el-table-column>

        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNum"
            :page-sizes="[2, 200, 300, 400]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            campusList:[],
            tableData:[],
            dialogFormVisible:false,
            pageInfo:{},
            query:{
                pageNum:1,
                pageSize:2,
                name:""
            },
            mode:{
              title:"",
              url:"",
            },
            ids:[],
            total:0,
            form:{},
            multipleSelection:[]
        },
        watch:{

        },
        methods: {
            delMany(){
              if (this.multipleSelection.length > 0) {
                  this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                  }).then(() => {
                      axios.post(`/major/delMany.do?ids=${this.ids}`).then(res=> {
                          if (res.data.code == 0) {
                              this.$message.success(res.data.msg);
                              this.initData1();
                          }
                          else {
                              this.$message.error(res.data.msg);
                          }
                      });
                  }).catch(() => {
                      this.$message({
                          type: 'info',
                          message: '已取消删除'
                      });
                  });

              }
              else {
                  confirm("请选择一条数据");
              }

            },


            handleSelectionChange(val) {
                this.multipleSelection=[];
                this.multipleSelection = val;
                this.ids=[];
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    this.ids.push(this.multipleSelection[i].id)
                }
            },
            handleClick(e){
              this.form=e;
                this.mode.title="修改";
                this.mode.url="/major/updateMajor.do";
                this.dialogFormVisible=true;
            },
            goAdd(){
                this.form={};
              this.mode.title="添加";
              this.mode.url="/major/addMajor.do";
              this.dialogFormVisible=true;
            },
            saveOrUpdate(){
                axios.post(this.mode.url,this.form).then(res=>{
                    if (res.data.code==0){
                        this.$message.success(res.data.msg);
                        this.dialogFormVisible=false;
                        this.initData1();
                    }
                    else {
                        this.$message.info(res.data.msg);
                    }
                })
            },
            //当每页最多展示条数改变的时候会执行该方法 参数为页最多展示条数
            handleSizeChange(val) {
                this.query.pageSize=val;
                //重新查询
                this.initData1();
            },
            //当页码改变的时候会执行该方法 参数为页码数
            handleCurrentChange(val) {
                //将新的当前页赋值
                this.query.pageNum=val;
                //重新查询
                this.initData1();
            },
            initData1() {
                    axios.post(`/major/findPage.do?pageNum=${this.query.pageNum}&pageSize=${this.query.pageSize}`,this.query).then(res=>{
                        this.tableData=res.data.records;
                        this.total=res.data.total;
                    });
            },
            findCampus(){
                axios.post(`/campus/findAll.do`).then(res=>{
                    this.campusList=res.data;
                })
            }
        },
        created(){
            this.initData1();
            this.findCampus();
        }

    })
</script>
</body>
</html>